<template>
	<div id="home">
		<el-container>
		  <el-header>
		  	<div class="logo">logo</div>
		  	<el-button type="danger" round 
		  		style="width: 40px;height: 40px;margin-right: 20px;margin-top: 10px;"
		  		size='mini' @click="signOut"
		  	>
		  		<i class="fa fa-sign-out"></i>
		  	</el-button>
		  </el-header>
		  <el-container>
		  	<!--左边的板块-->
		    <el-aside width="200px">
		    	<!--导航栏-->
		    	<nav-menu/>
		    </el-aside>
		    <!--右边的板块-->
		    <el-main>
		    	<!--管理下面的子组件的渲染出口-->
		    	<router-view/>
		    </el-main>
		  </el-container>
		</el-container>
	</div>
</template>

<script>
	import NavMenu from './NavMenu'
	
	export default{
		components:{NavMenu},
		
		methods:{
			//退出登录,// home的组件只是实现头部退出登录的按钮
			signOut(){
				var action = ()=>{
            	//清掉历史记录
					localStorage.clear();
                //跳转到登录页面
					this.$router.push('/Signin')
					
				}
            //点击退出按钮,会弹出mixin里面的弹框模块
				this.operatorConfirm(action,'退出');
			}
		}
	}
</script>

<style lang="scss" scoped>
#home{
	width: 100%;
	height: 100%;
	
	.el-container{
		width: 100%;
		height: 100%;	
		
		.el-header,.el-footer{
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		}
		
		.el-header{
			padding: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.logo{
				width: 200px;
				height: 100%;
				background: cyan;
			}
		}
	  
		.el-aside {
		    background-color: #D3DCE6;
		    color: #333;
		    text-align: center;
		    /*line-height: 200px;*/
		}
	  
		.el-main {
		    background-color: #E9EEF3;
		    color: #333;
		    text-align: center;
		    /*line-height: 160px;*/
		}
	}	
}	

</style>